<template>
  <div class="login">
    <div class="login-box">
      <div class="login-box-content">
        <div class="login-header">
          <span class="login-logo"></span>
          <span class="login-title">小仓鼠</span>
        </div>
        <div class="login-body">
          <div class="login-line">
            <a-input
              size="large"
              class="login-input"
              placeholder="账号"
              v-model:value="loginData.username"
            >
              <template #prefix><UserOutlined /></template>
            </a-input>
          </div>
          <div class="login-line">
            <a-input
              size="large"
              class="login-input"
              placeholder="密码"
              type="password"
              v-model:value="loginData.password"
              @pressEnter="submit"
            >
              <template #prefix><UnlockOutlined /></template>
            </a-input>
          </div>
        </div>
        <div class="login-footer">
          <a-button
            class="login-button"
            size="large"
            v-if="!loading"
            type="primary"
            @click="submit"
          >
            登录
          </a-button>
          <a-button class="login-button" size="large" v-else loading type="primary">
            登录中...
          </a-button>
        </div>
      </div>
    </div>

    <div class="record-warp">
      <div>Copyright © 云积分 深圳市云积分科技有限公司</div>
      <div class="police">
        粤ICP备14069812号-4
        <i class="bg"></i>
        粤公网安备 44030502004450号
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { UserOutlined, UnlockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { login } from "@/api/login";
import storage from "@/utils/storage";

export default defineComponent({
  name: "Login",
  components: {
    UserOutlined,
    UnlockOutlined
  },
  setup() {
    const router = useRouter();

    const loginData = reactive({
      model: {},
      username: "",
      password: ""
    });
    const loading = ref(false);
    const submit = () => {
      if (!loginData.username) return message.error("请输入账号");
      if (!loginData.password) return message.error("请输入密码");
      const data = {
        username: loginData.username,
        password: loginData.password
      };

      login(data).then(async (res: any) => {
        const { data } = res;

        storage.set("USER", data);
        storage.set("USER_ID", data.userId);
        router.push({ name: "AccountManagement", params: { userId: 123 } });
      });
    };
    return { loginData, submit, loading };
  }
});
</script>
<style lang="less" scoped>
@import "index.less";
</style>
